<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="img/kurento.png" type="image/png">

  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="bower_components/demo-console/index.css">
  <link rel="stylesheet" href="bower_components/ekko-lightbox/dist/ekko-lightbox.min.css">
  <link rel="stylesheet" href="css/kurento.css">

  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="bower_components/demo-console/index.js"></script>
  <script src="bower_components/ekko-lightbox/dist/ekko-lightbox.min.js"></script>
  <script src="bower_components/ekko-lightbox/dist/ekko-lightbox.min.js"></script>
  <script src="bower_components/webrtc-adapter/release/adapter.js"></script>

  <script src="bower_components/kurento-client/js/kurento-client.js"></script>
  <script src="bower_components/kurento-utils/js/kurento-utils.js"></script>

  <script src="js/index.js"></script>
  <title>Tutorial: WebRTC Statistics</title>
</head>

<body>
  <header>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"></button>
          <a class="navbar-brand" href=".">Kurento Tutorial</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="https://github.com/Kurento/kurento/tree/main/tutorials/javascript-browser/loopback-stats">
                <span class="glyphicon glyphicon-file"></span> Source Code</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </header>

  <div class="container">
    <div class="page-header">
      <h1>Tutorial: WebRTC Statistics</h1>
      <p>
        This application shows a <i>WebRtcEndpoint</i> connected to itself (loopback). Take a look to the <a href="img/pipeline.png" data-toggle="lightbox" data-title="WebRTC in loopback with statistics Media Pipeline" data-footer="WebRtcEnpoint in loopback">Media Pipeline</a>.
        To run this demo follow these steps:
      </p>
      <ol>
        <li>Open this page with a browser compliant with WebRTC (Chrome, Firefox).</li>
        <li>Click on <i>Start</i> button.</li>
        <li>Grant the access to the camera and microphone. After the SDP negotiation the loopback should start.</li>
        <li>Click on <i>Stop</i> to finish the communication.</li>
      </ol>
    </div>
    <div class="row">
      <div class="col-md-5">
        <h3>Local stream</h3>
        <video id="videoInput" autoplay width="480px" height="360px" poster="img/webrtc.png"></video>
        <br>
        <table class="table table-condensed">
          <tr>
            <th>Stat</th>
            <th>Browser (send)</th>
            <th>KMS (recv)</th>
          </tr>
          <tr>
            <td>SSRC</td>
            <td id="browserOutgoingSsrc">--</td>
            <td id="kmsIncomingSsrc">--</td>
          </tr>
          <tr>
            <td>Packets</td>
            <td id="browserPacketsSent">--</td>
            <td id="kmsPacketsReceived">--</td>
          </tr>
          <tr>
            <td>Bytes</td>
            <td id="browserBytesSent">--</td>
            <td id="kmsBytesReceived">--</td>
          </tr>
          <tr>
            <td>Packets Lost</td>
            <td>--</td>
            <td id="kmsPacketsLost">--</td>
          </tr>
          <tr>
            <td>Fraction Lost</td>
            <td>--</td>
            <td id="kmsFractionLost">--</td>
          </tr>
          <tr>
            <td>Jitter</td>
            <td>--</td>
            <td id="kmsJitter">--</td>
          </tr>
          <tr>
            <td>NACK</td>
            <td id="browserNackReceived">--</td>
            <td id="kmsNackSent">--</td>
          </tr>
          <tr>
            <td>FIR</td>
            <td id="browserFirReceived">--</td>
            <td id="kmsFirSent">--</td>
          </tr>
          <tr>
            <td>PLI</td>
            <td id="browserPliReceived">--</td>
            <td id="kmsPliSent">--</td>
          </tr>
          <tr>
            <td>ICE RTT</td>
            <td id="browserOutgoingIceRtt">--</td>
            <td id="kmsRtt">--</td>
          </tr>
          <tr>
            <td>REMB</td>
            <td id="browserOutgoingAvailableBitrate">--</td>
            <td id="kmsRembSend">--</td>
          </tr>
        </table>
      </div>
      <div class="col-md-2">
        <a id="start" href="#" class="btn btn-success">
          <span class="glyphicon glyphicon-play"></span> Start</a>
        <br>
        <br>
        <a id="stop" href="#" class="btn btn-danger">
          <span class="glyphicon glyphicon-stop"></span> Stop</a>
      </div>
      <div class="col-md-5">
        <h3>Remote stream</h3>
        <video id="videoOutput" autoplay width="480px" height="360px" poster="img/webrtc.png"></video>
        <br>
        <table class="table table-condensed">
          <tr>
            <th>Stat</th>
            <th>KMS (send)</th>
            <th>Browser (recv)</th>
          </tr>
          <tr>
            <td>SSRC</td>
            <td id="kmsOutogingSsrc">--</td>
            <td id="browserIncomingSsrc">--</td>
          </tr>
          <tr>
            <td>Packets</td>
            <td id="kmsPacketsSent">--</td>
            <td id="browserPacketsReceived">--</td>
          </tr>
          <tr>
            <td>Bytes</td>
            <td id="kmsBytesSent">--</td>
            <td id="browserBytesReceived">--</td>
          </tr>
          <tr>
            <td>Packets Lost</td>
            <td>--</td>
            <td id="browserIncomingPacketsLost">--</td>
          </tr>
          <tr>
            <td>Fraction Lost</td>
            <td id="kmsFractionLost">--</td>
            <td>--</td>
          </tr>
          <tr>
            <td>Jitter</td>
            <td>--</td>
            <td id="browserIncomingJitter">--</td>
          </tr>
          <tr>
            <td>NACK</td>
            <td id="kmsNackReceived">--</td>
            <td id="browserNackSent">--</td>
          </tr>
          <tr>
            <td>FIR</td>
            <td id="kmsFirReceived">--</td>
            <td id="browserFirSent">--</td>
          </tr>
          <tr>
            <td>PLI</td>
            <td id="kmsPliReceived">--</td>
            <td id="browserPliSent">--</td>
          </tr>
          <tr>
            <td>ICE RTT</td>
            <td id="kmsRtt">--</td>
            <td id="browserIncomingIceRtt">--</td>
          </tr>
          <tr>
            <td>REMB</td>
            <td id="kmsRembReceived">--</td>
            <td id="browserIncomingAvailableBitrate">--</td>
          </tr>
        </table>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <p> KMS end-to-end latency:
          <span id="e2eLatency">--</span>
        </p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <label class="control-label" for="console">Console</label><br><br>
        <div id="console" class="democonsole">
          <ul></ul>
        </div>
      </div>
    </div>
  </div>

  <footer>
    <div class="foot-fixed-bottom">
      <div class="container text-center">
        <hr>
        <div class="row">&copy; 2020 Kurento</div>
        <div class="row">
          <div class="col-md-4">
            <a href="http://www.urjc.es">
              <img src="img/urjc.gif" alt="Universidad Rey Juan Carlos" height="50px">
            </a>
          </div>
          <div class="col-md-4">
            <a href="https://kurento.openvidu.io/">
              <img src="img/kurento.png" alt="Kurento" height="50px">
            </a>
          </div>
          <div class="col-md-4">
            <a href="http://www.naevatec.com">
              <img src="img/naevatec.png" alt="Naevatec" height="50px">
            </a>
          </div>
        </div>
      </div>
    </div>
  </footer>

</body>

</html>
